<template>
  <el-select
    v-model="model"
    placeholder="请选择"
    :disabled="props.disabled"
    clearable
  >
    <el-input
      v-model="typeFilterInputValue"
      class="type-filter-input"
      placeholder="请输入关键词"
      :prefix-icon="Search"
    >
    </el-input>
    <el-option
      v-for="field in filterFields.filter((item) =>
        showList.includes(item.value),
      )"
      :key="field.value"
      :label="field.label"
      :value="field.value"
    >
      <div class="flex items-center" style="gap: 5px">
        <div
          v-html="getFormIconForType(field.value)"
          style="margin-top: 3px"
        ></div>
        <div class="field-name">{{ field.label }}</div>
      </div>
    </el-option>
    <!--    <template #label>-->
    <!--      <div class="flex items-center" style="gap: 5px">-->
    <!--        <div-->
    <!--          v-html="getFormIconForType(value.type)"-->
    <!--          style="margin-top: 3px"-->
    <!--        ></div>-->
    <!--        <div class="field-name">{{ value.label }}</div>-->
    <!--      </div>-->
    <!--    </template>-->
  </el-select>
</template>
<script setup lang="ts">
  import { Search } from "@element-plus/icons-vue";
  import { getFormIconForType } from "@/utils/SvgIcons.ts";
  import { computed, ref } from "vue";
  import { getDetailByTargetType } from "@/api/uap";
  import dist from "@/utils/dist.ts";

  interface Props {
    disabled?: boolean;
  }

  const props = defineProps<Props>();

  const model = defineModel<any>();
  const typeFilterInputValue = ref("");

  const filterFields = computed(() => {
    const result = fields.value.filter((field) => {
      return field.label
        .toLowerCase()
        .includes(typeFilterInputValue.value.toLowerCase());
    });
    if (result.length === 0) {
      return fields.value;
    } else {
      return result;
    }
  });

  let fields = ref<any[]>([]);
  let showList = [
    "TEXT",
    "TEXTAREA",
    "INT",
    "DECIMAL",
    "DATE",
    "DATETIME",
    "SELECT",
    "MULTIPLE",
    "RADIO",
    "CHECKBOX",
    "SINGLEMEMBER",
    "MULTIMEMBER",
    "ATTACHMENT",
    "LINK",
    "condition",
  ];
  const getFieldMap = async () => {
    const res = await dist.getDictData("sdm.global.defined.filedType");
    fields.value =
      res.items.map((item) => {
        return {
          label: item.displayName,
          value: item.code,
        };
      }) || [];
    console.log(fields, "getFieldMap");
  };
  getFieldMap();
</script>

<style scoped lang="scss">
  .type-filter-input {
    width: 100%;
    padding: 5px 12px;
    :deep(.el-input__wrapper) {
      background-color: #f2f2f2;
      border: none;
      box-shadow: none;
    }
    :deep(.el-input__wrapper:hover) {
      box-shadow: none;
    }
    :deep(.el-input__wrapper.is-focus) {
      box-shadow: none;
    }
  }
</style>
